:root{
    --bgcolor:linear-gradient(rgba(235,105,78,0.5),rgba(241, 67, 183,0.5),rgba(254,234,131,0.5),rgba(248,192,147,0.5));
}
input{
    outline: none;
}
input:valid{
    border-color: green;
}
input:invalid{
    border-color: red;
}
input:focus{
    border-color: yellow;
}
.box{
    outline: none;
    border: none;
    position: relative;
    z-index: 15;
    width: 12em;
    height: 2em;
    border-radius: 3em;
   margin:25% auto;
   animation-name: bian,yidong;
   animation-duration: 1s,1.5s;
   animation-delay: 6s,7s;
   animation-fill-mode: forwards,forwards;
   animation-timing-function: ease-in-out;
}

.btn1{
    border:1px solid rgb(187, 82, 236);
    text-align: center;
   height: inherit;
    border-radius:inherit;
    background-image: var(--bgcolor);
   animation-name: zeng;
   animation-duration: 6s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
   animation-direction: alternate;
  
}

label{
    color: rgba(105, 196, 238, 1);
    opacity: 0;
    animation-name: xianshi;
    animation-delay: 6s;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    font-family: 'Courier New', Courier, monospace;
    }
 
@keyframes zeng {
    from{
        width: 0em;
        opacity: 0;
    }
    50%{
        opacity: 0.6;
    }
    to{
        width: inherit;
        opacity: 1;
    }
}
@keyframes bian {
    from{
       width: 12em;
    }
    to{
        width: 6em;   
    }
}
@keyframes xianshi {
to{
 opacity: 1;
}
}

@keyframes yidong {
    to{
        transform: translate(0%,150%);
        box-shadow: 0 0 8px 3px rgba(145, 142, 142, 0.856);
    }
}
